// import echarts from 'echarts'
import BorderItem from '@/components/borderItem/ui.vue'
import ProgressBall from '@/components/progressBall/ui.vue'
import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/gauge'
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/tooltip'
import {
  TransverseLineOption,
  LineOption,
  PieOption
} from './option';

export default {
  data() {
    return {
      strokeWidth: document.documentElement.clientWidth/120
    }
  },
  components: {
    BorderItem,
    ProgressBall
  },
  mounted() {
    this.initEchart();
    window.onresize = () => {
      this.initEchart()
    }
  },
  methods: {
    deepCopy(obj) {
      var str, newobj = obj.constructor === Array ? [] : {};
      if (typeof obj !== 'object') {
        return;
      } else if (window.JSON) {
        str = JSON.stringify(obj), //系列化对象
          newobj = JSON.parse(str); //还原
      } else {
        for (var i in obj) {
          newobj[i] = typeof obj[i] === 'object' ?
            this.deepCopy(obj[i]) : obj[i];
        }
      }
      return newobj;
    },

    initEchart() {
      let myChart1 = echarts.init(this.$refs.echartDiv1)
      let myChart2 = echarts.init(this.$refs.echartDiv2)
      let myChart3 = echarts.init(this.$refs.echartDiv3)
      let myChart4 = echarts.init(this.$refs.echartDiv4)
      let myChart5 = echarts.init(this.$refs.echartDiv5)
      let myChart6 = echarts.init(this.$refs.echartDiv6)

      const option1 = this.deepCopy(TransverseLineOption);
      option1.series[0].name = '进度';
      option1.yAxis.data = ['经济', '创新', '民生', '创新', '创新']
      option1.series[0].data = [0.1, 0.3, 0.5, 0.8, 0.9]
      option1.series[0].itemStyle.normal.color = new echarts.graphic.LinearGradient(
        0, 0, 1, 0,
        [{
            offset: 0,
            color: '#3537B8'
          },
          {
            offset: 1,
            color: '#8D57FF'
          }
        ]
      )
      myChart1.setOption(option1)

      const option2 = this.deepCopy(TransverseLineOption);
      option2.series[0].name = '计划总投资额';
      option2.yAxis.data = ['经济', '创新', '民生', '创新', '民生']
      option2.series[0].data = [700, 356, 500, 500, 897]
      option2.series[0].itemStyle.normal.color = new echarts.graphic.LinearGradient(
        0, 0, 1, 0,
        [{
            offset: 0,
            color: '#2944BE'
          },
          {
            offset: 1,
            color: '#10C7E7'
          }
        ]
      )
      myChart2.setOption(option2)

      const option3 = this.deepCopy(PieOption);
      option3.legend.data = ['未达序', '达序时', '超时序']
      option3.series[0].data = [{
          value: 335,
          name: '未达序'
        },
        {
          value: 310,
          name: '达序时'
        },
        {
          value: 234,
          name: '超时序'
        }
      ]
      myChart3.setOption(option3)

      const option4 = this.deepCopy(PieOption);
      option4.legend.data = ['产业发展', '工业', '服务业', '科技', '民生']
      option4.series[0].data = [{
          value: 335,
          name: '产业发展'
        },
        {
          value: 310,
          name: '工业'
        },
        {
          value: 234,
          name: '服务业'
        },
        {
          value: 234,
          name: '科技'
        },
        {
          value: 234,
          name: '民生'
        }
      ]
      myChart4.setOption(option4)


      const option5 = this.deepCopy(LineOption);
      option5.series[0].name = '计划总投资额TOP5项目'
      option5.xAxis.data = ['经济', '创新', '民生', '创新', '民生']
      option5.xAxis.name = '责任单位'
      // option5.xAxis.nameRotate = 45
      option5.yAxis.name = '(单位:个数)'
      option5.grid.right = 45
      option5.series[0].data = [700, 356, 500,356, 223]
      option5.series[0].itemStyle.normal.color = new echarts.graphic.LinearGradient(
        0, 0, 0, 1,
        [{
            offset: 0,
            color: '#10C7E7'
          },
          {
            offset: 1,
            color: '#2944BE'
          }
        ]
      )
      myChart5.setOption(option5)

      const option6 = this.deepCopy(LineOption);
      option6.xAxis.data = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
      option6.xAxis.boundaryGap = false
      option6.yAxis.name = '(单位:亿元)'
      option6.series[0].data = [200, 356, 400, 500, 550, 656, 700, 760, 800, 836, 900, 1000]
      option6.series[0].type = 'line'
      option6.series[0].areaStyle = {}
      option6.series[0].itemStyle.normal.color = new echarts.graphic.LinearGradient(
        0, 0, 0, 1,
        [{
            offset: 0,
            color: '#43FF78'
          },
          {
            offset: 1,
            color: '#02471E'
          }
        ]
      )
      myChart6.setOption(option6)

      myChart1.resize()
      myChart2.resize()
      myChart3.resize()
      myChart4.resize()
    }
  }
}